<template>
    <nav :class="cns">
        <slot name="logo"></slot>
        <ph-scroll class="ph-menu-scroll">
            <menu-tree v-for="(tree,index) in trees" :key="index" :tree="tree" :isRoot="true"></menu-tree>
        </ph-scroll>
    </nav>
</template>
<script lang="ts">
import { defineComponent, PropType, provide, toRef, computed, inject, Ref } from 'vue'
import {TreeNode} from './struct'
import MenuTree from './menu-tree.vue'
import { searchPath } from '../../shared/tree'
import PhScroll from 'ph-scroll'
export default defineComponent({
    components:{MenuTree,PhScroll},
    props:{
        theme:{
            type:String
        },
        current:{type:String,default:""},
        trees:{
            type:Array as PropType<Array<TreeNode>>,
            default:()=>[]
        }
    },
    setup(props,{emit}){
        const toggleAside = inject("phToggleAside") as (f?:boolean,role?:string)=>void
        provide('current',toRef(props,'current'))
        provide('notifyRootMenu',(action:string,paths:TreeNode[])=>{
            emit("action",action,paths)
            toggleAside&&toggleAside(false,"menu")
        })
        provide('getParentMenu',()=>[])
        provide('expandParent',()=>1)
        const topTheme = inject<Ref<string>>("theme")
        const cns = computed(()=>{
            const theme = props.theme||topTheme?.value||"dark"
            return ['ph-menu-tree','ph-menu-root','ph-menu-'+theme]
        })
        const matchedPaths = computed(()=>{
            return (searchPath(props.trees,props.current)||[]) as TreeNode[]
        })
        provide('matchedPaths',matchedPaths)
        return {
            cns,
        }
    }
})
</script>
<style lang="scss">
@import './menu.scss';
</style>
